<template>
	<view class="">
		<view class="m-card-template"
			:style="{'background-size': '160rpx 130rpx', 'background-repeat': 'no-repeat', 'background-position': '90% 2%', 'background-origin': 'content-box' }">
			<view v-if="title" class="m-card-title" @click="setArrow">
				<view class="m-card-template-title">
					<span v-if="asterisk" style="color: red;">*</span>
					<span :style="{color: titleColor}">{{templateTitle}}</span>
					<!-- 新增标题描述信息  -->
					<view class="m-card-note" :style="{color: noteColor}" v-if="note">{{note}}</view>
				</view>
				<view v-if="type">
					<eui-uicons class="m-card-arrow" type="up" size="20" v-if="arrow"/>
					<eui-uicons class="m-card-arrow" type="down" size="20" v-else />
				</view>
				<view v-else>
					<slot name="rightButton" />
				</view>
			</view>
			<view :class="{ 'm-card-content': title }" v-if="arrow">
				<view class="m-card-template-list">
					<slot name="content" />
				</view>
				<slot name="bottem" />
			</view>

		</view>
	</view>

</template>

<script>
	/**
	 *  card: 这是卡片
	 *  @property {String} type =[Boolean, String] 是否显示 
	 * 	@property {String} titleColor 文本的颜色
	 *  @property {Object} value =  {...}  这个是选择对象
	 *	@property {String} templateTitle = 展示文本
	 *	@property {String} note = 标题描述信息
	 *	@property {String} noteColor = 标题描述颜色
	 *	@property [Boolean, String] isImage 背景图片是否显示
	 *	@property [Boolean, String] isApprove 是否审批
	 *	@property [Boolean, String] asterisk  红色*
	 * 	@event {Function} click  longpress 长按事件
	 * 	@event {Function} click  tapCardTitle 展开关闭事件
	 * @event {Function} click  longpress 长按事件
	 */
	export default {
		name: "mCard",
		components: {
		},
		model: {
			prop: 'value'
		},
		props: {
			/**
			 * 值
			 */
			value: {
				type: Object
			},
			title: {
				type: Boolean,
				default: false
			},
			templateTitle: {
				type: String,
				default: ""
			},
			titleColor: {
				type: String,
				default: '#999'
			},
			note: {
				type: String,
				default: ""
			},
			noteColor: {
				type: String,
				default: "#999"
			},
			type: {
				type: Boolean,
				default: true
			},
			asterisk: {
				type: Boolean,
				default: false
			},
			// 是否开启的默认值
			defArrow: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				arrow: true
			}
		},
		mounted() {
			this.arrow=this.defArrow;
		},
		computed: {
			list() {
				return this.value;
			}
		},
		methods: {
			setArrow() {
				if (this.type) {
					this.arrow = !this.arrow;
					this.$emit('tapCardTitle', this.arrow);
				}
			},
			click(e) {
				// console.log(e);
				this.$emit('click', e);
			},
			longpress(e) {
				// console.log(e);
				this.$emit('longpress', e);
			},
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
			},
			buttonClick(t, v) {
				this.$parent.buttonClick(t, v);
				// console.log(t, v);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.m-card-template {
		padding: $uni-spacing-row-base;
		// height: 900rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 0;
		margin: $uni-spacing-row-base;
		display: flex;
		flex-direction: column;
	}

	.m-card-title {
		padding: $uni-spacing-row-base $uni-spacing-row-lg;
		display: flex;
	}

	.m-card-template-title {
		flex: 1;
		// font-size: $uni-font-size-title;
		font-weight: 600;
		font-size: $uni-font-size-lg;
	}

	.m-card-template-list {
		padding: $uni-spacing-row-base;
		border-radius: 10rpx;
		padding: 0;
		margin-left: $uni-spacing-row-base;
		display: flex;
		flex-direction: column;
	}

	.m-card-note {
		margin-top: 3px;
		font-size: 24rpx;
		font-weight: normal;
	}

	.scroll-view-list {
		padding: $uni-spacing-row-base 0rpx;
	}

	.m-card-arrow {
		color: $uni-text-color-disable !important;
	}

	.m-card-content {
		border-top: 1px solid $uni-border-color;
	}

	.m-card-top {
		display: grid;
		grid-template-columns: 52% 48%;
		padding: $uni-spacing-row-base $uni-spacing-row-lg;
	}

	.m-card-bottem {
		display: flow-root;
		// border-top: 1px solid $uni-border-color;
		border-bottom-left-radius: $uni-border-radius-lg;
		border-bottom-right-radius: $uni-border-radius-lg;
		padding: $uni-spacing-col-sm $uni-spacing-row-sm;
		background: $uni-bg-color-grey;
		text-align: right;
	}
</style>
